<template>
    <div>
        <el-upload
            class="upload-demo"
            action=""
            :auto-upload="false"
            :on-exceed="outlimit"
            :limit="maxNum"
            :file-list="fileList"
            :on-change="uploadonchange"
            :on-remove="uploadRemove"
            :disabled='isFalse'
            list-type="picture">
            <el-button slot='trigger' size="small" type="success">选取</el-button>
            <el-button size="small" type="primary" @click='submit' :loading='loading'>点击上传</el-button>
            <div slot="tip" class="el-upload__tip" v-show="showTip">
                jpg、png、pdf格式，不超过6MB
            </div>
        </el-upload>
    </div>
</template>

<script>
import {uploadFiles} from '@/request/api'
export default {
    components: {},
    props: {
        address:{
            type:String,
            default:''
        },
        files:{
            // type: Array,
            default () {
                return []
            }
        },
        fileList: {
            type: Array,
            default () {
                return []
            }
        },
        maxNum: {
            type: Number,
            default () {
                return 4;
            }
        },
        isFalse: {
            type: Boolean,
            default () {
                return false;
            }
        },
        showTip:{
            type:Boolean,
            default:true
        }
    },
    data() {
        return {
            loading:false,
        };
    },
    computed: {},
    methods: {
        submit(){
            this.loading = true
            console.log('自定义上传方法：',this.fileList,this.address);
            if(!this.fileList.length){
                this.$message.error('请选取文件')
                this.loading = false
                return
            }
            let form = new FormData()
            this.fileList.forEach(item=>{
                form.append('file',item.raw)
            })
            form.append('flag',this.address)
            uploadFiles(form).then(res=>{
                this.$emit('uploadRes',res)
                setTimeout(()=>{
                    this.loading = false
                    this.$message.success('上传成功')
                },1000)
            }).catch(err=>{
                this.$message.error(err)
                setTimeout(()=>{
                    this.loading = false
                },1000)
            })

        },
        //超过上传限制
        outlimit(){
            this.$notify.error({
                title: '提示',
                message: '超出上传文件个数限制!',
                showClose: false
            });
        },
        uploadonchange(file,filelist){
            console.log('上传器中的文件：',file)
            var arr = file.name.split(".")
            if(arr[1] == "pdf"){
                file.url = "http://171.221.199.35:10109/pdf.png"
            }
            this.fileList.push(file)
            const isJPG = file.raw.type === 'image/jpeg';
            const isPNG = file.raw.type === 'image/png';
            const isPdf = file.raw.type === 'application/pdf';
            const isLt2M = file.raw.size / 1024 / 1024 < 6;
            // console.log(file.raw.size/1024/1024)
            if (!isJPG && !isPdf && !isPNG) {
                this.$notify.error({
                    title: '提示',
                    message: '上传文件只能是 JPG、PNG、PDF格式!',
                    showClose: false
                });
                this.fileList.pop()
            }
            if (!isLt2M) {
                this.$notify.error({
                    title: '提示',
                    message: '上传文件大小不能超过 6MB!',
                    showClose: false
                });
                this.fileList.pop()
            }
            return  isLt2M;
        },
        uploadRemove(file,filelist){
            let fileList = this.fileList;
            if(fileList && fileList.length>0){
                for(var i=0;i<fileList.length;i++){
                    if(fileList[i]==file){
                        fileList.splice(i, 1)
                        break;
                    }
                }
            }
        }
    },
    mounted () {

    },
    watch:{
        files:function(value,oldValue){
            if(value){
                value.forEach(value => {
                    console.log(value)
                    this.fileList.push({'url':value.url,'name':value.name,'status': 'success'});
                });
            }
        }
    }
};
</script>


<style lang="less" scoped>
// 深度作用器
/deep/.upload-demo{
    .el-upload{
        border: none;
        width: auto;
        height: auto;
        border-radius: 0;
        margin-right: 10px;
        float: none;
    }
}
</style>
